<template>
  <div class="material-purchase-container">
    <el-row>
      <el-input
        v-model="searchQuery"
        style="width: 500px; margin-right: 10px"
        clearable
      >
        <template #prepend>物料号:</template>
        <template #append>
          <el-button
            type="primary"
            @click="buttonClick.searchClick"
          >搜索</el-button>
        </template>
      </el-input>
      <el-button
        type="primary"
        style="margin-right: 10px"
        @click="buttonClick.wrumxClick"
      >未入库明细</el-button>
      <el-checkbox v-model="includeUnreleasedOrders">包含未释放订单</el-checkbox>
    </el-row>

    <el-row
      class="margin-top"
      :gutter="10"
    >
      <el-col :span="12">
        <el-auto-resizer style="height: 90vh">
          <template #default="{ height, width }">

            <el-table-v2
              :columns="leftColumns"
              :data="filteredMaterialDataLeft"
              :width="width"
              :height="height"
              fixed
              :header-cell-style="{ background: 'rgb(200, 201, 204)', color: '#606266' }"
              :row-class="rowClass"
              class="bordered-table"
            />
          </template>
        </el-auto-resizer>
      </el-col>
      <el-col :span="12">
        <el-auto-resizer style="height: 90vh">
          <template #default="{ height, width }">
            <el-table-v2
              :columns="rightColumns"
              :data="filteredMaterialDataRight"
              :width="width"
              :height="height"
              fixed
              :row-class="rowClass"
              class="bordered-table"
            />
          </template>
        </el-auto-resizer>
      </el-col>
    </el-row>
  </div>
</template>

<script setup>
import { showSuccess } from '@/hooks/useMyMessageBox';
import myAxios from '@/myAxios/myAxios';
import { ref, computed } from 'vue';

const searchQuery = ref('');
const includeUnreleasedOrders = ref(false);

let numberRander = function ({ cellData: num }) {

  const factor = Math.pow(10, 3); // 计算放大倍数
  return (Math.floor(num * factor) / factor).toFixed(3); // 截断小数并保留指定位数

  // if (num == '499.9999') {
  //   console.log('num :>> ', num);
  // }
  // return `${Number(num).toFixed(3)}`;
};
// 左侧表格列定义
const leftColumns = [
  {
    key: 'index',
    dataKey: 'index',
    title: '序号',
    width: 60,
    align: 'center',
  },
  {
    key: 'MATNR',
    dataKey: 'MATNR',
    title: '物料号',
    width: 150,
    sortable: true,
  },
  {
    key: 'LABST',
    dataKey: 'LABST',
    title: '库存',
    width: 80,
    align: 'right',
    sortable: true,
    cellRenderer: numberRander,
  },
  {
    key: 'LABST1',
    dataKey: 'LABST1',
    title: '线边库',
    width: 80,
    align: 'right',
    sortable: true,
    cellRenderer: numberRander,
  },
  {
    key: 'UNCLEAR',
    dataKey: 'UNCLEAR',
    title: '未清采购',
    width: 80,
    align: 'right',
    sortable: true,
    cellRenderer: numberRander,
  },
  {
    key: 'RSMNG',
    dataKey: 'RSMNG',
    title: '预留',
    width: 80,
    align: 'right',
    sortable: true,
    cellRenderer: numberRander,
  },
  {
    key: 'EISBE',
    dataKey: 'EISBE',
    title: '已催未发',
    width: 80,
    align: 'right',
    sortable: true,
    cellRenderer: numberRander,
  },
  {
    key: 'BSTRF',
    dataKey: 'BSTRF',
    title: '已发未到',
    width: 80,
    align: 'right',
    sortable: true,
    cellRenderer: numberRander,
  },
  {
    key: 'YDWJ',
    dataKey: 'YDWJ',
    title: '已到未检',
    width: 80,
    align: 'right',
    sortable: true,
    cellRenderer: numberRander,
  },
  {
    key: 'YJWR',
    dataKey: 'YJWR',
    title: '已检未入',
    width: 80,
    align: 'right',
    sortable: true,
    cellRenderer: numberRander,
  },
  {
    key: 'BADQTY',
    dataKey: 'BADQTY',
    title: '不合格数',
    width: 80,
    align: 'right',
    sortable: true,
    cellRenderer: numberRander,
  },
  {
    key: 'LOSTQTY',
    dataKey: 'LOSTQTY',
    title: '需催货量',
    width: 80,
    align: 'right',
    sortable: true,
    cellRenderer: numberRander,
  },
  {
    key: 'MAKTX',
    dataKey: 'MAKTX',
    title: '描述',
    width: 120,
    sortable: true
  }
];

// 右侧表格列定义
const rightColumns = [
  {
    key: 'index',
    dataKey: 'index',
    title: '序号',
    width: 60,
    align: 'center'
  },
  {
    key: 'SUPPCODE',
    dataKey: 'SUPPCODE',
    title: '供应商代码',
    width: 120,
    sortable: true
  },
  {
    key: 'DATA3',
    dataKey: 'DATA3',
    title: '供应商',
    width: 120,
    sortable: true
  },
  {
    key: 'ACCEPTTIME',
    dataKey: 'ACCEPTTIME',
    title: '收货日期',
    width: 180,
    sortable: true
  },
  {
    key: 'MATCODE',
    dataKey: 'MATCODE',
    title: '物料号',
    width: 150,
    sortable: true
  },
  {
    key: 'PLANQTY',
    dataKey: 'PLANQTY',
    title: '计划数量',
    width: 100,
    align: 'right',
    sortable: true,
    cellRenderer: numberRander,
  },
  {
    key: 'RECEIVEQTY',
    dataKey: 'RECEIVEQTY',
    title: '收货数量',
    width: 100,
    align: 'right',
    sortable: true,
    cellRenderer: numberRander,
  },
  {
    key: 'GOODQTY',
    dataKey: 'GOODQTY',
    title: '合格数量',
    width: 100,
    align: 'right',
    sortable: true,
    cellRenderer: numberRander,
  },
  {
    key: 'BADQTY',
    dataKey: 'BADQTY',
    title: '不合格数量',
    width: 100,
    align: 'right',
    sortable: true,
    cellRenderer: numberRander,
  },
  {
    key: 'FORCHECKQTY',
    dataKey: 'FORCHECKQTY',
    title: '入库数量',
    width: 100,
    align: 'right',
    sortable: true,
    cellRenderer: numberRander,
  },
  {
    key: 'UNTESTQTY',
    dataKey: 'UNTESTQTY',
    title: '未检验数量',
    width: 100,
    align: 'right',
    sortable: true,
    cellRenderer: numberRander,
  },
  {
    key: 'UNINSAP',
    dataKey: 'UNINSAP',
    title: '未入库数量',
    width: 100,
    align: 'right',
    sortable: true,
    cellRenderer: numberRander,
  },
  {
    key: 'MATNAME',
    dataKey: 'MATNAME',
    title: '描述',
    width: 150,
    sortable: true
  }
];

const materialDataLeft = ref([
  // 您的数据保持不变
  // ...
]);
const materialDataRight = ref([
  // 您的数据保持不变
  // ...
]);
const filteredMaterialDataLeft = computed(() => {
  let result = materialDataLeft.value;
  // if (searchQuery.value) {
  //   const query = searchQuery.value.toLowerCase();
  //   result = result.filter(item =>
  //     item.MATCODE.toLowerCase().includes(query) ||
  //     item.DATA3.toLowerCase().includes(query) ||
  //     item.SUPPCODE.toLowerCase().includes(query)
  //   );
  // }
  return result;
});
const filteredMaterialDataRight = computed(() => {
  let result = materialDataRight.value;
  // if (searchQuery.value) {
  //   const query = searchQuery.value.toLowerCase();
  //   result = result.filter(item =>
  //     item.MATCODE.toLowerCase().includes(query) ||
  //     item.DATA3.toLowerCase().includes(query) ||
  //     item.SUPPCODE.toLowerCase().includes(query)
  //   );
  // }
  return result;
});

const buttonClick = {
  wrumxClick: function () {
    let param = `${searchQuery.value.replace(/,/g, '\',\'')}`;
    myAxios.get('陈帅廷查询电机库存未入库明细', param).then(res => {
      // 给res加index
      res.forEach((item, index) => {
        item.index = index + 1;
      });
      materialDataRight.value = res;
      showSuccess('查询成功');
    });
  },
  searchClick: function () {
    let param = `9900🈹1001,7001🈹${searchQuery.value}🈹X🈹X`;
    let functionName = includeUnreleasedOrders.value ? 'SAP库存（单物料,包含未释放订单）2' : 'SAP库存（单物料）1';
    myAxios.getSap(functionName, param, '9900').then(async res => {
      let mesParam = `9900🈹${searchQuery.value.replace(/,/g, '\',\'')}`;
      let mesData = await myAxios.get('陈帅廷查询电机库存已催未发数量', mesParam);
      console.log('mesData :>> ', mesData);
      // 赋值
      let sapData = res['TableSet']['返回表'];
      let resultData = [];
      for (let index = 0; index < sapData.length; index++) {
        let row = sapData[index];
        if (row['LGORT'] == '1001') {
          let item = mesData.find(el => el['MATCODE'] == row['MATNR']);
          if (item) {
            row['BSTRF'] = Number(item['UNLOADQTY']);
            row['EISBE'] = Number(item['CALLQTY']) - Number(row['BSTRF']);
            row['BADQTY'] = Number(item['BADQTY']);
            row['YDWJ'] = Number(item['YDWJ']);
            row['YJWR'] = Number(item['YJWR']);
          }
          else {
            row['BSTRF'] = 0;
            row['EISBE'] = 0;
            row['BADQTY'] = 0;
            row['YDWJ'] = 0;
            row['YJWR'] = 0;
          }
          row['LOSTQTY'] = Number(row['RSMNG']) - row['BSTRF'] - row['EISBE'] - Number(row['LABST']);
          row.index = resultData.length + 1;
          resultData.push(row);
        }
        else if (row['LGORT'] == '7001') {
          let item = sapData.find(el => el['MATNR'] == row['MATNR'] && el['LGORT'] == '1001');
          if (item) {
            item['LABST1'] = Number(row['LABST']);
          }
        }
      }
      console.log('resultData :>> ', resultData);
      materialDataLeft.value = resultData;
      showSuccess('查询成功');
    });
  },
};

// 行样式函数
const rowClass = ({ rowIndex }) => {
  return rowIndex % 2 === 1 ? 'striped-row' : '';
}
</script>

<style scoped>
.margin-top {
  margin-top: 10px;
}

/* 虚拟表格容器样式 */
.material-purchase-container {
  height: calc(100vh - 60px);
  padding: 20px;
  box-sizing: border-box;
}
:deep(.striped-row) {
  background-color: #f5f7fa;
}

/* 边框样式 */
:deep(.bordered-table) {
  border: 1px solid #ebeef5;
}

:deep(.bordered-table .el-table-v2__header-cell) {
  border-right: 1px solid #ebeef5;
  border-bottom: 1px solid #ebeef5;
}

:deep(.bordered-table .el-table-v2__row-cell) {
  border-right: 1px solid #ebeef5;
  border-bottom: 1px solid #ebeef5;
}
</style>